<template>
<div class="pay-history abs full">
	<div class="rel full overflow-x-hidden">
		<div class="history-list">
			<div class="history-item rel" v-for="item in payHistoryList" :key="item.transNo" @click="payDetail(item)">
				<h2>{{item.name}}</h2>
				<h3>-{{item.cost}}元</h3>
				<P>{{item.time}}</P>
			</div>
		</div>
		<div v-if="payHistoryList.length==0" class="nullPayHistory">
			<p>您的支付记录为空~</p>
		</div>
	</div>
</div>
</template>

<script>
export default {
	name: 'pay-history',
	data() {
		return {
			payHistoryList: []
		}
	},
	mounted() {
		// 为方便调试把this暴露在Vue原型链下
		this.$pages.payHistory = this;
	},
	activated() {
		document.title = '支付记录';
		this.getPayHistory();
	},
	deactivated() {
		this.payHistoryList = [];
	},
	methods: {
		// 跳转到支付详情页面
		payDetail(item) {
			this.$router.push({
				name: 'payDetail',
				params: {
					pDetail: item
				}
			});
		},
		getPayHistory(pageStart = 1) {
			// 判断是否有customerId
			let customerId = this.$util.getCustomerId();
			if (!customerId) {
				return;
			}
			let that = this;
			this.$util.ajax('/customer/payment/list', 'post', {
				pageSize: 9999,
				pageStart: pageStart,
				customerId: customerId
			}).then(function(data) {
				console.log(data);
				if (data.code == "100000") {
					that.payHistoryList = data.data;
					console.log("支付记录");
					console.log(that.payHistoryList);
				}
			}).catch(function(err) {
				console.log(err);
			});
		}
	}
}
</script>

<style scoped>
.pay-history {
	background-color: #fff;
}

.history-list {
	width: 7.18rem;
	float: right;
}

.history-item {
	height: 1.49rem;
	border-bottom: 0.01rem solid #d8d8d8;
}

h2,
h3,
p {
	margin: 0;
	font-weight: normal;
}

.history-item h2 {
	position: absolute;
	top: 0.28rem;
	left: 0.07rem;
	font-size: 0.32rem;
}

.history-item h3 {
	position: absolute;
	top: 0.26rem;
	right: 0.34rem;
	font-size: 0.36rem;
}

.history-item p {
	position: absolute;
	color: #a7a7a9;
	font-size: 0.28rem;
	bottom: 0.22rem;
	left: 0.07rem;
}

.nullPayHistory {
	position: fixed;
	width: 100%;
	height: 100%;
	font-size: .5rem;
	background-color: #ddd;
}

.nullPayHistory p {
	margin-top: 50%;
	text-align: center
}
</style>
